<template>
  <el-dialog title="提示" :visible="PerviewDialog" width="800px" @close="closePerviewDialog">
    <h2>{{artiles.title}}</h2>
    <p><span>{{artiles.createTime | timer}}</span>&nbsp;&nbsp;<span>{{username}}</span>&nbsp;&nbsp;
    <i class="el-icon-view"></i><span>{{artiles.visits}}</span></p>
    <div class="boxs">
      <div v-html="artiles.articleBody"></div>
    </div>
  </el-dialog>
</template>

<script>
import dayjs from 'dayjs'
import { detail } from '@/api/hmmm/articles.js'
export default {
  name: 'previewArt',
  props: {
    PerviewDialog: {
      type: Boolean,
      defineProps: false
    }
  },
  filters: {
    timer (val) {
      return dayjs(val).format('YYYY-MM-DD HH:mm:ss')
    }
  },
  data () {
    return {
      artiles: {
        articleBody: '',
        visits: 0,
        videoURL: '',
        title: '',
        createTime: ''
      },
      username: ''
    }
  },
  methods: {
    closePerviewDialog () {
      this.$emit('closePerviewDialog')
    },
    async showArticles (id, username) {
      const { data: res } = await detail(id)
      this.artiles = res
      this.username = username
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-dialog__body {
  padding: 20px;
}
.boxs {
  border-top: 1px dashed #ccc;
  background-color: #f5f5f5;
  padding: 10px;
}
</style>
